<template>
  <div
    ref="node"
    :style="nodeContainerStyle"
    @click="clickNode"
    @mouseup="changeNodeSite"
    @dblclick.stop="showDetail"
    :class="nodeContainerClass"
  >
    <!-- 最左侧的那条竖线 -->
    <div class="ef-node-left"></div>
    <!-- 节点类型的图标 -->
    <div class="ef-node-left-ico flow-node-drag">
      <svg-icon :icon-class="step.ico" :class="nodeIcoClass" />
    </div>
    <!-- 节点名称 -->
    <div class="ef-node-text" :show-overflow-tooltip="true">
      {{ step.name }}
    </div>
    <!-- 节点状态图标 -->
    <div class="ef-node-right-ico">
      <i
        class="el-icon-circle-check el-node-state-success"
        v-show="step.state === 'success'"
      ></i>
      <i
        class="el-icon-circle-close el-node-state-error"
        v-show="step.state === 'error'"
      ></i>
      <i
        class="el-icon-warning-outline el-node-state-warning"
        v-show="step.state === 'warning'"
      ></i>
      <i
        class="el-icon-loading el-node-state-running"
        v-show="step.state === 'running'"
      ></i>
    </div>
    <el-dialog
      :title="step.name"
      :visible.sync="show"
      width="600px"
      :append-to-body="true"
      :before-close="handleClose"
    >
      <component
        :is="show ? step.name : ''"
        :visible="show"
        :step="step"
        mode="out-in"
        @onCloseDialog="onCloseDialog"
      ></component>
    </el-dialog>
    <!-- <component :is="show?dynName1:'dynName1'" :visible="show" mode="out-in"></component> -->
  </div>
</template>

<script>
import fileUpload from "@/components/Test";
import fileUpload1 from "@/components/Test1";
export default {
  props: {
    step: Object,
    activeElement: Object,
  },
  data() {
    return {
      dynName: "fileUpload",
      dynName1: "fileUpload1",
      show: false,
    };
  },
  provide() {
    return {
      step: this.step,
    };
  },
  components: { fileUpload, fileUpload1 },
  computed: {
    nodeContainerClass() {
      return {
        "ef-node-container": true,
        "ef-node-active":
          this.activeElement.type == "node"
            ? this.activeElement.nodeId === this.step.id
            : false,
      };
    },
    // 节点容器样式
    nodeContainerStyle() {
      return {
        top: this.step.y,
        left: this.step.x,
      };
    },
    nodeIcoClass() {
      var nodeIcoClass = {};
      nodeIcoClass[this.step.ico] = true;
      // 添加该class可以推拽连线出来，viewOnly 可以控制节点是否运行编辑
      nodeIcoClass["flow-node-drag"] = this.step.viewOnly ? false : true;
      return nodeIcoClass;
    },
  },
  methods: {
    handleClose() {},
    // 点击节点
    clickNode() {
      // this.$emit("clickNode", this.node.id);
      //this.show = true;
    },
    // 鼠标移动后抬起
    changeNodeSite() {
      // 避免抖动
      if (
        this.step.x == this.$refs.node.style.left &&
        this.step.y == this.$refs.node.style.top
      ) {
        return;
      }
      this.$emit("changeNodeSite", {
        nodeId: this.step.id,
        x: this.$refs.node.style.left,
        y: this.$refs.node.style.top,
      });
    },
    showDetail() {
      this.show = true;
    },
    onCloseDialog() {
      this.show = false;
    },
  },
};
</script>
